<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>快递页面</title>
		<style type = "text/css">
			*{
				margin : 0;
				padding: 0;
				overflow: hidden;
			 }
			 body{
			 	background-size: 100% 100%;
			 	background-image: url(img/background.png);
			 	background-attachment: fixed;
			 }
			 .div{
			 		 position: relative;
			 		 width: 1549px;
			 		 height: 1149px;
			 		 margin: 0 auto;
			 		 display: block;
				}
			.package{
					position: absolute;
				    left: 19vw;
				    top: 16vw;
					height:69vh;
					width: 28vw;
					animation: move 5s ease;
					animation-fill-mode: forwards;
			}
			.icon{
				position: absolute;
				top: 74vh;
				left: 87vw;
				transform: scale(0.55);
			}
			@keyframes move{
				0%{
					left:0px;
				}
				100%{
					left:900px;
			}
			 }
			 .image2{
			  position: absolute;
			  top: 14vh;
			  left:59vw;
			  transform: scale(0.4) rotateZ(-18deg) ;
			 }
			 .image2:hover{
			    transform:scale(0.5);
			 }
			.clock{
				position:relative;
			    width: 16vw;
			    height: 31vh;
			    top: -154vh;
			    left: 15vh;
			     background-image:url(img/clock.png);
			     background-repeat:no-repeat;
			     background-size:cover;
			    }
			 .clock div{
			      position:absolute;
			        left:55%;
			        top:50%;
			        transform-origin:bottom;
			        transform:translate(-50%,-100%) rotatez(0deg);
			        width:5px;
			        border-radius:30px;
			       }
			       /* 时针动画 */
			       #hour{
			        height:7vh;
			        background-color:#000000;
			        
			        animation:clock 5s linear 1;/* 指定时针animation动画 */
			       }
			      
			       #second{
			        height:9vh;
			        background-color:#ff0000;
			        
			        animation:clock 0.5s linear infinite;
			      }
			  
			       @keyframes clock{
			      100%{transform:translate(-50%,-100%) rotatez(360deg);}
			       }
				   .pei{
					   position: absolute;
					   top: 59vh;
					   right: 210vw;
					   transform: scale(0.6);
					   animation: send 5s ease;
					  
					   animation-fill-mode: forwards;
				   }
				   @keyframes send{
				   	0%{
				   		left:-75vw;
				   	}
				   	100%{
				   		left:-14vw;
				   }
				    }
	
	</style>
		</head>
		<body class="body">
			<div class="div">
			<img class="package" src="img/sf.png"/>
			<a href="messagek.html"><img class="icon" src="img/icons.png"/>
			<img class="pei" src="img/kuai.png"/>
			</div>
			<div class="clock">
			  <div id="hour"></div>
			</div>
	</body>
</html>
